<template>
	<view class="card-box" v-if="paySetting.offline">
		<view class="select_pay_box ">
			<view class="pay-box bg-white">
				<view class="pay-way">
					<view class="fs32">支付方式</view>
					<u-grid :col="3" :border="false" class="u-p-t-30" hover-class="none">
						<u-grid-item v-for="(item,index) in paySetting.payList" :key="index" @click="pay_code=item.pay_code" :custom-style="{padding:'0 10rpx'}">
							<view class="item" :class="pay_code == item.pay_code ? 'checked': ''">
								<u-icon :name="payImgList[item.pay_code]" :size="48"></u-icon>
								<view class="grid-text u-p-t-20 u-font-24">{{item.pay_name}}</view>
							</view>
						</u-grid-item>
					</u-grid>
				</view>
				<view  class="account-box u-m-t-40">
					<view class="fs32">下级收款账户</view>
					<view class="section-cell u-m-t-30">
						<u-section :title="sectionTitle" sub-title="查看全部账户" @click="setOfflinePay" :showLine="false"></u-section>
					</view>
					<view>
						<u-select v-model="showAccountSelect" :list="offlinePayList" @confirm="selectOffline" confirm-color="#C39F4F"></u-select>
					</view>
					<view>
						<u-cell-group  >
							<block v-if="paySetting.offline.weixin_usd == 1 && selectOfflinePay == 1">
								<u-cell-item title="帐户姓名" :value="paySetting.offline.weixin_name" :arrow="false" hover-class="none"></u-cell-item>
								<u-cell-item title="微信号" :value="paySetting.offline.weixin_account" :arrow="false" hover-class="none"></u-cell-item>
								<u-cell-item title="收款二维码" :use-label-slot="true" :border-bottom="false" :arrow="false" hover-class="none">
									<view slot="label">
										<!-- <u-image width="600" mode="widthFix" :src="baseUrl+paySetting.offline.weixin_qrcode"></u-image> -->
										<!-- <u-image width="600" mode="widthFix" src="/pagesB/static/channel/images/proxy_bg.png"></u-image> -->
										<u-image width="500" mode="widthFix" :src="baseUrl+paySetting.offline.weixin_qrcode"></u-image>
									</view>
								</u-cell-item>
							</block>
							<block v-if="paySetting.offline.alipay_usd == 1 && selectOfflinePay == 2">
								<u-cell-item title="帐户姓名" :value="paySetting.offline.alipay_name" :arrow="false" hover-class="none"></u-cell-item>
								<u-cell-item title="支付宝帐户" :value="paySetting.offline.alipay_account" :arrow="false" hover-class="none"></u-cell-item>
								<u-cell-item title="收款二维码" :use-label-slot="true" :border-bottom="false" :arrow="false" hover-class="none">
									<view slot="label">
										<!-- <u-image width="600" mode="widthFix" :src="baseUrl+paySetting.offline.alipay_qrcode"></u-image> -->
										<u-image width="600" mode="widthFix" src="/pagesB/static/channel/images/proxy_bg.png"></u-image>
										<u-image width="600" mode="widthFix" src="/pagesB/static/channel/images/proxy_bg.png"></u-image>
									</view>
								</u-cell-item>
							</block>
							<block v-if="paySetting.offline.bank_usd == 1 && selectOfflinePay == 3">
								<u-cell-item title="开户银行" :value="paySetting.offline.bank_name" :arrow="false" hover-class="none"></u-cell-item>
								<u-cell-item title="开户支行" :value="paySetting.offline.bank_subbranch" :arrow="false" hover-class="none"></u-cell-item>
								<u-cell-item title="持卡人姓名" :value="paySetting.offline.bank_user_name" :arrow="false" hover-class="none"></u-cell-item>
								<u-cell-item title="银行卡号" :value="paySetting.offline.bank_card_number" :arrow="false" hover-class="none"></u-cell-item>
							</block>
						
							<block v-if="paySetting.offline.is_usd == 1 && selectOfflinePay> 0" >
								<u-cell-item title="上传付款凭证（最多三张）" 
									class="u-p-l-0 u-p-r-0" 
									:use-label-slot="true" 
									:title-style="{fontSize:'32rpx'}"
									:border-bottom="false" 
									:arrow="false" 
									hover-class="none">
									<view slot="label">
										<u-upload ref="upload" @on-change="uploaded" @on-remove="removeImg" :action="upAction" max-count="3"></u-upload>
									</view>
								</u-cell-item>
							</block>
						</u-cell-group>
					</view>
				</view>
			</view>

		</view>
		
		
			
		<u-button  class="defaultbtn mt20" shape="circle" :loading="isLoading" @click="postOffLine">立即提交</u-button>
		
	</view>
</template>


<script>
	export default {
		name: "payBox",
		props: {
			paySetting: {
				type: Object,
				default: function() {
					return {};
				}
			},
			payType: {
				type: String,
				default: ''
			},
			from: {
				type: String,
				default: ''
			},
			order_id: {
				type: Number,
				default: 0
			},
			model: {
				type: Object,
				Object,
				default: function() {
					return {};
				}
			}
		},
		data() {
			return {
				baseUrl: this.config.baseUrl,
				isLoading: false,
				searchText: '',
				param: {
				},
				showSelectBox: true,
				pay_code: "offline",
				upAction: this.config.upImageUrl,
				fileList: [],
				payImgList: {
					balance: '/static/public/images/pay/balance.png',
					weixin: '/static/public/images/pay/weixin.png',
					appWeixinPay: '/static/public/images/pay/weixin.png',
					miniAppPay: '/static/public/images/pay/weixin.png',
					alipayMobile: '/static/public/images/pay/alipay.png',
					alipayApp: '/static/public/images/pay/alipay.png',
					offline: '/static/public/images/pay/bank.png',
					goodsMoney: '/static/public/images/pay/goodsmoney.png',
					uplevelGoodsMoney: '/static/public/images/pay/goodsmoney.png',
				},
				orderInfo: {},
				showAccountSelect: false,
				offlinePayList:[],
				sectionTitle: '线下收款信息',
				selectOfflinePay: 0,
				type:""
			}
		},
		onLoad(options) {
			
			this.setOfflinePay();
		
		},
		methods: {
			selectOffline(val){
				this.selectOfflinePay = val[0].value;
				this.sectionTitle = val[0].label;
			},
			setOfflinePay(){
				if(this.paySetting.offline.weixin_usd == 1){
					this.offlinePayList.push({
						value: '1',
						label: '微信转帐'
					});
				}
				if(this.paySetting.offline.alipay_usd == 1){
					this.offlinePayList.push({
						value: '2',
						label: '支付宝转帐'
					});
				}
				if(this.paySetting.offline.bank_usd == 1){
					this.offlinePayList.push({
						value: '3',
						label: '银行转帐'
					});
				}
				if(this.paySetting.offline.is_usd == 1){
					this.sectionTitle = '请选择下级代理的收款账户'
				}else{
					this.sectionTitle = '下级代理未设置收款账户'
					
				} ;
				this.showAccountSelect = true;
			},
			postOffLine() {
				// if (this.isLoading == true) {
					// return false;
				// }
				// console.log(this.$route.query)
				if (this.fileList.length < 1) {
					
					this.$u.toast('请上传付款凭证.');
					return false;
				}
				// this.isLoading = true;
				this.param.order_id = this.order_id;
		
				const type = this.$route.query.type
				const apiList = {
					1:'returnBond', //保证金退还
					2:'returnBondRecharge', //打款升级奖励保证金
				}
				const url = `/channel/api.order/${apiList[type]}`
				this.param.margin_audit_img = this.fileList;
				this.param.status = 1;
				// console.log(this.param.fileList)
				this.$u.post(url, this.param).then(res => {
					this.isLoading = false;
					uni.showToast({
						title: res.msg,
						duration: 2000,
						icon: 'none',
						complete: () => {
							// 这个complete,是调用上面的方法之后,立马就执行的,所以这里面还要加个定时器
							setTimeout(() => {
								// uni.navigateBack();
								uni.redirectTo({
										url: `/pagesB/channel/bond/bonListLowerRetuen?type=`+type
									});
							},1000)
					
						}
					});
					// navItem.list = navItem.list.concat(res.data.list);
				
					//loaded新字段用于表示数据加载完毕，如果为空可以显示空白页
				})
				// this.$u.post(url, data).then(res => {
				// 	this.isLoading = false;
				// 	uni.redirectTo({
				// 		url: `/pages/public/pay/paySuccess?from=${from}&payType=${payType}&order_id=${order_id}&pay_code=offline`
				// 	});
				// }).catch(res => {
				// 	this.isLoading = false;
				// })

			},
			uploaded(res, index, lists) {
				var res = JSON.parse(res.data);
				this.fileList.push(res.file);
			},
			removeImg(index, lists) {
				let file = this.fileList[index];
				this.fileList.splice(index, 1);
				this.$u.post(this.config.removeImageUrl, {
					file: file
				}).then(res => {})
			}
		}
	}
</script>

<style lang="scss">
	.card-box {
		height: calc(100vh - 200rpx);
		border-radius: 20rpx;
		padding: 20rpx;
		background-color: #FFFFFF;
	}

	.select_pay_box {
		.title {
			align-items: center;
			font-size: 36rpx;
			font-weight: 600;
			border-bottom: 1rpx solid $border-color-light;

			.tip {
				font-weight: normal;
				display: block;
				font-size: 26rpx;
				color: $font-color-light;
			}
		}


		.box {
			position: relative;
			height: 260rpx;
			width: calc(100% - 20rpx);
			overflow: hidden;
			text-align: center;
		}

		.img {
			width: 48rpx;
			height: 48rpx;

		}

		.item_icon {
			display: inline-block;
			width: 40rpx;
			height: 40rpx;
			border-radius: 50%;
			position: relative;
			margin: 0;
		}

		/* .u-icon {
			position: absolute;
			top: 6rpx;
			right: 0px;
			left: 0;
			z-index: 9;
			text-align: center;
			margin: 0 auto;
			display: flex;
			justify-content: center;
			align-items: center;
		} */
	}

	.check-defaul {
		width: 40rpx;
		height: 40rpx;
		border: solid 1rpx #dddddd;
		border-radius: 50%;
	}

	.offline_box {
		line-height: 60rpx;

		.title {
			position: relative;
			padding-left: 100rpx;
			padding-top: 20rpx;
			padding-bottom: 20rpx;
			border-bottom: 1rpx solid #ccc;
			font-size: 40rpx;
			color: #FFFFFF;
			background-color: $uni-color-success;

			.icon {
				position: absolute;
				left: 20rpx;
				width: 60rpx !important;
				height: 60rpx !important;
			}

		}

		.alipay {
			background-color: $uni-color-primary;
		}

		.bank {
			background-color: $uni-color-error;
		}

		.info {
			padding: 20rpx;
			line-height: 60rpx;
			font-size: 30rpx;
		}
	}
	
	.pay-box{
		/* min-height: calc(100vh - 288rpx); */
		padding: 40rpx 20rpx;
		border-radius: 40rpx 40rpx 0px 0px;
		
		.item {
			padding: 30rpx 10rpx;
			width: 100%;
			height: 100%;
			text-align: center;
			border: 2rpx solid #ccc;
			border-radius: 8rpx;
			&.checked{
				background: #F9F5ED;
				border: 2rpx solid #744800;
			}
		}
		
	}
	
	.section-cell{
		padding: 20rpx;
		border-radius: 8rpx;
		background: #ececec;
	}
</style>
